<script setup lang="ts">
	// * 库存销量统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, watch } from 'vue'
	import { stockApi } from '@api/data'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: [],
		index: 0
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null
	let timerId = null

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 配置
		const option: echarts.EChartsOption = {
			title: { text: '| 库存与销量分析', top: 20, left: 20 }
		}
		// 设置配置
		myEcharts.setOption(option)
		// 给图表绑定移入 移出
		myEcharts.on('mouseover', () => {
			clearInterval(timerId)
		})
		myEcharts.on('mouseout', () => {
			startInterval()
		})
	}

	// * 获取数据
	const getData = async () => {
		const { data } = await stockApi()
		state.chartsData = data
		// 更新配置
		updateCharts()
		startInterval()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 每个商品表示一个饼图： 将库存与销量显示在图表中
		const centerArrs = [
			['20%', '40%'],
			['50%', '40%'],
			['80%', '40%'],
			['35%', '75%'],
			['65%', '75%']
		]
		const colorArrs = [
			['#4FF778', '#0BA82C'],
			['#E5DD45', '#E8B11C'],
			['#E8821C', '#E55445'],
			['#5052EE', '#AB6EE5'],
			['#23E5E5', '#2E72BF']
		]
		const s = state.index * 5
		const e = (state.index + 1) * 5
		const showData = state.chartsData.slice(s, e)
		const series = showData.map(
			(item, i): echarts.SeriesOption => ({
				type: 'pie',
				center: centerArrs[i],
				label: { show: true, position: 'center', color: colorArrs[i][0] },
				name: item.name,
				// 关闭高亮放大效果
				emphasis: { scale: false },
				labelLine: { show: false },
				data: [
					{
						value: item.sales,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: colorArrs[i][0] },
								{ offset: 1, color: colorArrs[i][1] }
							])
						}
					},
					{ value: item.stock, name: `${item.name}\n\n${item.sales}`, itemStyle: { color: '#333843' } }
				]
			})
		)
		// 配置项
		const updateOption: echarts.EChartsOption = {
			series
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		const size = (fullRef.value.offsetWidth / 100) * 3.25
		const series = new Array(5).fill(0).map(
			(): echarts.SeriesOption => ({
				type: 'pie',
				label: { fontSize: size / 2 },
				radius: [size * 3, size * 3.4]
			})
		)
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			title: { textStyle: { fontSize: size } },
			series
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	const startInterval = () => {
		if (timerId) clearInterval(timerId)
		timerId = setInterval(() => {
			state.index++
			if (state.index > 1) {
				state.index = 0
			}
			updateCharts()
		}, 3000)
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
		clearInterval(timerId)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="full_container" ref="fullRef"></div>
</template>

<style scoped lang="scss"></style>
